<template>
  <OneDialog model-value="true">
    <template #titles>
      <span>AI草稿</span>
      <i class="iconfont icon-close hand" @click="handlerCancel" />
    </template>
    <template #content>
      <AIReplayContent :emailId="emailId" @success="handlerOk" />
    </template>
  </OneDialog>
</template>
  
<script lang="ts" setup>
  import { defineProps, defineAsyncComponent } from 'vue';
  
  const OneDialog = defineAsyncComponent(() => import('/@/components/Common/OneDialog.vue'));
  const AIReplayContent = defineAsyncComponent(() => import('./AIReplayContent.vue'));

  const props = defineProps({
    emailId: {
      type: String,
      default: '',
    },
  });

  const emit = defineEmits(['handleSuccess', 'close']);;

  const handlerCancel = () => {
    emit('close', false);
  }

  const handlerOk = (data: { data: string; }) => {
    handlerCancel();
    let replayCon = data.data || '';
    replayCon = replayCon.replace(/\n/g, '<br/>');
    emit('handleSuccess', replayCon);
  };
</script>
<style lang="scss" scoped>
.hand {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 20px;
}
</style>  